<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input  v-model="listQuery.name"  placeholder="请输入石油设备名称设备" clearable class="filter-input filter-item"  style="width:20%"/>
      <el-select  v-model="listQuery.category" placeholder="请选择石油设备种类" clearable class="filter-input filter-item" style="width:20%">
        <el-option v-for="item in deviceCategory" :key="item.bothThree" :label="item.bothThree" :value="item.bothThree"></el-option>
      </el-select>
      <el-button  type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter" >
        查询
      </el-button>
      <el-button  type="primary" class="filter-item" icon="el-icon-refresh-right" @click="listQuery=Object.assign({},{})" >
        重置
      </el-button>
      <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="handleAdd">
        增加
      </el-button>
      <el-button type="danger" plain class="filter-item" icon="el-icon-delete" @click="deleteAll">
        删除
      </el-button>
    </div>

    <el-table border style="width: 100%" :data="list" >
      <el-table-column prop="id" label="石油设备的编号"></el-table-column>
      <el-table-column prop="name" label="石油设备的名称"></el-table-column>
      <el-table-column prop="category" label="石油设备的所属种类"></el-table-column>
      <el-table-column prop="state" label="石油设备的状态"></el-table-column>
      <el-table-column prop="useManId" label="调度者编号"></el-table-column>
      <el-table-column prop="useDesc" label="石油设备用途描述" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" style="text-align:center;width: 100%" label-width="90px" >
        <!--操作和slot-scope 要学会使用,这里是解构赋值了。给子组件使用，底下的row就相当于$scope.   -->
        <template slot-scope="{row,$index}">

          <el-button type="text" @click="handleEdit(row,$index)" >
            <i class="el-icon-edit-outline" />详情
          </el-button>

          <el-button type="text" @click="handleEdit(row,$index)" >
            <i class="el-icon-edit-outline" />编辑
          </el-button>


          <el-popover :ref="'popover-' + row.name" placement="top" width="160" title="确定删除吗" trigger="click">

            <div>
              <el-button size="mini" @click="$refs[`popover-`+ row.name].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="$refs[`popover-` + row.name].doClose() ; handleDelete(row,$index)">确定</el-button>
            </div>

            <!--slot="reference"决定了是否出现删除这个button。reference可以理解为与这个el-popover相关。-->
            <el-button slot="reference" type="text" style="margin-left: 10px">
              <i class="el-icon-delete" />删除
            </el-button>

          </el-popover>

        </template>

      </el-table-column>
    </el-table>

    <!--    自己绑定了@pagination="getTableList"，切换每页最大条数时，每页的条数就会改变，如果没有绑定该事件，那么就不会切换！  -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getTableList"></pagination>
    <!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

    <el-dialog  :title="dialogStatus=='add'?'新增石油设备':'编辑石油设备信息'" :visible.sync="dialogFormVisible" >

      <el-form  ref="form1" :model="temp" label-position="center" label-width="120px" style="width: 100%" :rules="rules"  >

        <el-row>
          <el-col :span="12">
            <el-form-item label="石油设备编号" prop="id" label-width="150px">
              <el-input v-model="temp.id" placeholder="石油设备编号" :disabled="dialogStatus==='update'" maxlength="64" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="石油设备所属种类" prop="type" label-width="150px" >
              <el-input  v-model="temp.category" placeholder="石油设备所属种类" maxlength="256" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="石油设备名称" prop="name" label-width="150px">
              <el-input v-model="temp.name" placeholder="石油设备名称"  maxlength="64" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="石油设备规格" prop="no" label-width="150px">
              <el-input v-model="temp.no" placeholder="石油设备名称"  maxlength="64" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="石油设备状态" prop="state" label-width="150px">
              <el-input v-model="temp.state" placeholder="石油设备状态"  maxlength="256" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="石油设备保修期限" prop="limitTime" label-width="150px">
              <el-input v-model="temp.limitTime" placeholder="石油设备保修期限"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="石油设备开始使用时间" prop="limitTime" label-width="150px">
              <el-input v-model="temp.startTime" placeholder="石油设备开始使用时间"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="石油设备报废日期" prop="limitTime" label-width="150px">
              <el-input v-model="temp.overTime" placeholder="石油设备保修期限"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="正调度石油设备的员工编号" prop="limitTime" label-width="150px">
              <el-input v-model="temp.useManId" placeholder="请输入正调度石油设备的员工编号"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="石油设备用途描述" prop="useDesc" label-width="150px">
              <el-input v-model="temp.useDesc" placeholder="石油设备用途描述" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>




        <el-form-item label="石油设备其他信息" prop="note" label-width="150px">
          <el-input v-model="temp.note" placeholder="石油设备其他信息" type="textarea" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleReset('form1')" type="primary">
          重置
        </el-button>
        <el-button type="primary" @click="handleSubmit('form1')" >
          提交
        </el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import {add,deleteDevice,update,getListByCondition3,getListByCondition2} from '../../api/devices'
  import request2 from '../../api/devices'
  import pagination from '../../components/Mypagination/index'
  import Temp from '../deviceFix/chulibaoxiu/temp'
  export default {
    name: 'index',
    components:{
      Temp,
      pagination
    },
    data() {
      return{
        dialogStatus:"",
        temp:{},
        dialogFormVisible:false,
        rules:{
          id:[{required: true,message:'id is required!',trigger:'blur'}],
          name:[{required: false}],
          type:[{required: false}],
          status:[{required:true , message:'status is required',strigger:'blur'}],
          otherinfo:[{required: false}],
        },
        list:[],
        total:2,
        listQuery:{
          page: 1,
          limit: 10,
          name: undefined,
          category: undefined,
        },
        deviceCategory:[
          {
            bothThree:'钻井设备'
         },
          {
            bothThree:'抽油设备'
          }
          ,
          {
            bothThree:'清管设备'
          },
          {
            bothThree:'加热设备'
          }
        ]
      }
    },
    created() {
      console.log(123);
      this.getTableList();
    },
    methods: {
      getTableList(){/*其实可以结构出来东西吧，或者说可以console.log(page)和console.log(limit)，emit出来的*/
        var pageNum=this.listQuery.page//因为儿子emit的currentPage就是page，赋值给this.listQuery.page的
        var pageSize=this.listQuery.limit//因为儿子emit的limit就是赋值给this.listQuery.limit的
        var name=this.listQuery.name
        var category=this.listQuery.category
        this.listLoading = true;
        getListByCondition3({pageSize,pageNum,name,category}).then(response=>{
          // console.log('获取到request3')
          console.log(response);
          // this.list=response.data.content;
          // this.total=response.data.totalElements;
          this.list=response.data.list
          this.total=response.data.count
          this.listLoading=false;
        })
      },
      handleAdd(){
        this.dialogStatus='add';
        this.dialogFormVisible=true;
        this.$nextTick(()=>{
          this.$refs['addForm'].temp={}
        })

      },
      handleSubmit(){
        this.$refs['form1'].validate((valid)=>{//validate是固定的写法
          if(valid){
            if(this.dialogStatus==='add'){
              this.$axios.get('http://localhost:8183/devices/findById/'+this.temp.id).then(resp=>{
                if(resp.data==true){//自己修改了 add 和 update 的重复性bug。
                  this.$message({
                    message:"已存在该设备，请重新输入设备ID",
                    type: "error",
                    duration: 2000
                  })
                }else{
                  request2.handleAdd(this.temp).then(resp=>{
                    // this.$axios.post('http://localhost:8183/devices/save',this.temp).then(resp=>{
                    if(resp.data==='success'){
                      this.list.unshift(this.temp)
                      this.dialogFormVisible=false
                      this.$message({
                        message: "添加成功！",
                        type: "success",
                        duration: 2000
                      })
                    }else{
                      this.handleWarning(resp)
                    }
                  })
                }
              })
            }else if(this.dialogStatus==='update'){
              this.$axios.put("http://localhost:8183/devices/update",this.temp).then(resp=>{
                if(resp.data=='success'){
                  this.dialogFormVisible=false
                  // this.$router.push('/device')
                  window.location.reload()
                  this.$message({
                    message:"修改成功！",
                    type: "success",
                    duration: 2000
                  })
                }
              })

            }
          }
        })


      },
      handleDelete(row,index){
        this.$axios.delete("http://localhost:8183/devices/deleteById/"+row.id).then(resp=>{
          this.$alert("删除成功",'消息',{
            confirmButtonText: '确定',
            callback: action => {
              window.location.reload();
            }
          })
        })
      },
      // handleDelete(row,index){//和上面一个效果
      //   this.$axios.delete("http://localhost:8183/devices/deleteById/"+this.list[index].id).then(resp=>{
      //     console.log(resp)
      //   })
      // },
      handleEdit(row,index){
        this.dialogStatus='update';
        this.dialogFormVisible=true;//开启，开启渲染。
        // this.temp.name=row.name;这样编辑会编辑不动
        // this.temp.campus=row.campus;
        // this.temp.state=row.campus;
        this.$nextTick(()=>{//放在this.dialogFormVisible=true的后面，放在handleEdit这个方法之内。
          // this.temp=row/*这样会赋值的是地址，搞得双向绑定会消除地址装的值，所以不能这样*/
          this.temp=Object.assign({},row);//这样赋值就会让row的值到temp中，而不是row的首地址。
          // this.temp=Object.assign(row,{});//这样会删除
        })

      },
      handleReset(){
        if(this.dialogStatus==='add')
          this.$refs['form1'].resetFields();//会把所有内容都重置，包括disable的ID主键
        else{
          this.temp.name=''
          this.temp.type=''
          this.temp.status=''
          this.temp.otherinfo=''
        }

      },
      handleWarning(response){
        this.$message({
          message:  response.message || response ,
          type: "warning",
          duration: 2000
        })
      },
      handleFilter(){
        // console.log(this.listQuery);
        var obj={}
        obj.list=this.list
        obj.listQuery=this.listQuery
        getListByCondition(obj).then(resp=>{
          console.log(resp.mockList)
          this.list=resp.mockList;
        }).catch(resp=>{
          console.log("哈哈哈");
        })
      },
      deleteAll(){
        this.list.splice(0,this.list.length);
      }
    }
  }
</script>

<style scoped>


</style>
